const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
/**
 * vue项目实时预览
 */
module.exports = {
  mode: "development", // development  production
  entry: "./src/js/main.js", // 入口文件
  output: {
    path: path.resolve(__dirname, "build"), // 决定出口文件在哪里
    filename: "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"]
      },
      {
        test: /(\.png|\.jpg|\.svg)/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 3 * 1024, // 3* 1024b = 3kb
              name: "img/[name].[ext]"
            }
          }
        ]
      },
      {
        // 如果是.vue文件，使用如下的loader
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      filename: "index.html",
      template: path.resolve(__dirname, "./index.html") // 指定模块的位置
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    open: true // 配置是否自动打开浏览器
  }
};
